<script lang="ts">
import Menu from '../components/icons/Menu.vue'
import SearchBar from '../components/icons/SearchBar.vue'

export default {
  components: {
    Menu,
    SearchBar,
  },
  setup() {
    // search demo
    const dataSource = [
      {
        value: '用户设置',
        class: '系统功能',
        target_url: '#'
      },
      {
        value: '点位地图',
        class: '系统功能',
        target_url: '#'
      },
      {
        value: '哈西万达停车场',
        class: '地点',
        target_url: '#'
      },
      {
        value: '哈西服装城停车场',
        class: '地点',
        target_url: '#'
      },

    ]
    return {
      dataSource,
    }
  },
  beforeCreate() {
    document.querySelector('body')?.setAttribute('style', 'background: lightgray')
  },
  beforeDestroy() {
    document.querySelector('body')?.removeAttribute('style')
  }
}
</script>

<template>
  <Menu />
  <div class="main-area">
    <div class="main-title">
      <h1>哈尔滨停车场点位地图</h1>
    </div>
    <div class="search-area">
      <SearchBar :search-bar-width="'100%'" :has-search-tips="true" :search-tips="'你可以查找：地名、系统功能'"
        :search-data-origin-source="dataSource" />
    </div>
    <div class="card-area">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card title="card name">
            <p> card content </p>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="card name">
            <p> card content </p>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="16" style="margin-top: 16px;">
        <a-col :span="6">
          <a-card title="card name">
            <p> card content </p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="card name">
            <p> card content </p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="card name">
            <p> card content </p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="card name">
            <p> card content </p>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.main-area {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 60vw;
  margin-top: 15vh;
  left: 50%;
  transform: translate(-50%, 0);

  .main-title {
    text-align: center;

    h1 {
      font-size: 40px;
      font-weight: bolder;
    }
  }

  .search-area {
    width: 90%;
    margin-top: 20px;
    margin-left: 5%;
    margin-right: auto;
  }

  .card-area {
    width: 90%;
    // padding: 10px;
    margin-top: 20px;
    margin-left: 5%;
    margin-right: auto;
  }
}
</style>